<template>
	<view class="qualification flex_c">
		<view class="nav_bar" style="background-color: rgba(255, 255, 255, 1);" v-if="from_type != 1">
			<uni-nav-bar color="#333" left-icon="left" title="" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$util.back()"></uni-nav-bar>
		</view>

		<view class="nav_box" v-if="from_type != 1"></view>
		
		<view class="auth-content-text">
			<view class="auth-title">资格认证</view>
			<view class="auth-text">完成实名认证后可提升账号安全，享受更多平台权益，如现、发起活动、圈子管理等。</view>
		</view>

		<view class="content">

			<view class="list flex_center">
				<view class="label">职业</view>
				<view class="input" :id="category_name ? '' : 'nohave'" @click="onAuth">
					{{ category_name ? category_name : '请选择' }}

					{{ category_pname ? ` - ${category_pname}` : '' }}
				</view>
			</view>
			
			<view class="image_box" v-if="status == 0 || status == 3">
				<view class="up_box flex_c" @click="onUpLoad" v-if="!image">
					<view class="icon">
						<u-icon name="photo-fill" color="#666666" size="72rpx"></u-icon>
					</view>
					<view class="text">上传认证资料</view>
				</view>

				<view class="image" v-else @click="$util.previewImage([image],0)">
					<image :src="image" mode="aspectFill"></image>
				</view>

				<view class="detele flex_r_around" @click="image = ''">
					<u-icon name="close-circle-fill" color="#FD2A53" size="40rpx"></u-icon>
				</view>
			</view>
			
			<view class="image_preview" v-else @click="$util.previewImage([image],0)">
				<image :src="image" mode="widthFix"></image>
			</view>

		</view>

		<view class="btn" @click="onsubmit" v-if="status == 0 || status == 3">确认</view>

		<view>
			<w-compress ref='wCompress' />
		</view>


		<view>
			<u-picker keyName="name" :show="auth_picker_show" ref="uPicker" :columns="authTypeColumn"
				@confirm="confirmAuth" @change="changeAuthColumn" @cancel="auth_picker_show = false"
				@close="auth_picker_show = false" :closeOnClickOverlay="true"></u-picker>
		</view>

		<view>
			<u-modal :show="showmodal" title="认证成功" content='您已完成资格认证' confirmText="我知道了" @confirm="back"></u-modal>
		</view>

	</view>
</template>

<script>
	import WCompress from '@/components/w-compress/w-compress.vue';
	export default {
		components: {
			WCompress,
		},
		data() {
			return {
				image: '',

				status: 0,


				auth_picker_show: false,

				authType: [],
				authTypeColumn: [
					[],
					[]
				],
				category_pname: '',
				category_name: '',
				category_pid: 0,
				category_id: 0,
				
				


				showmodal: false,
				
				status: 0,
				
				from_type: 0,
			}
		},
		methods: {
			
			onUpLoad() {
				this.$native.authorize('photos');
				var count = 1;
				uni.chooseImage({
					count: count,
					success: (file) => {
						file.tempFilePaths.forEach(element => {
							this.$refs.wCompress.start(element, {
								pixels: 2000000, // 最大分辨率，默认二百万
								quality: 0.6, // 压缩质量，默认0.8
								type: 'png', // 图片类型，默认jpg
							}).then(url => {
								this.$upload(url, {
									type: 'picture'
								}).then(res => {
									if (res.status == 2 || res.status == 1) {
										this.image = res.result.url;
									} else {
										this.$util.msg(res.msg);
									}
								});
							});

						})
					},
					fail: (err) => {
						// this.$util.msg(`${err.errMsg}----${err.errCode}`);
					}
				})
			},

			// 职业选择竖排切换
			onAuth() {
				if(this.status == 0 || this.status == 3){
					this.auth_picker_show = true;
				}
			},

			changeAuthColumn(e) {
				if (e.columnIndex == 0) {
					var picker = this.$refs.uPicker;
					picker.setColumnValues(1, this.authType[e.index].child)
				}
			},

			confirmAuth(e) {
				this.category_pname = e.value[0].name;
				this.category_pid = e.value[0].id;
				this.category_name = e.value[1].name;
				this.category_id = e.value[1].id;
				this.auth_picker_show = false;
			},

			getAuthType() {
				this.$get('/category/getAuthType').then(res => {
					this.authType = res.data;
					this.getAuthName();
					this.authTypeColumn[0] = this.authType;
					this.authTypeColumn[1] = this.authType[0].child;
					this.authTypeColumn = JSON.parse(JSON.stringify(this.authTypeColumn))
				});
			},


			onsubmit() {

				if (!this.category_id) {
					return this.$util.msg('请选择职业');
				}

				if (!this.image) {
					return this.$util.msg('请上传认证资料');
				}
				
				uni.showLoading();
				this.$post('/user/providerAuth', {
					certificate: this.image,
					category_ids: this.category_id,
				},true,()=>{
					uni.hideLoading();
				}).then(res => {
					uni.hideLoading();
					this.showmodal = true;
				});

			},

			back() {
				if(this.from_type == 1){
					this.$util.back();
				}else {
					this.$native.backAction();
				}
			},
			
			getAuthName(){
				if(this.category_pid){
					this.authType.forEach(element=>{
						if(element.id == this.category_pid){
							this.category_pname = element.name;
							element.child.forEach(item=>{
								if(item.id == this.category_id){
									this.category_name = item.name;
								}
							});
						}
					});
				}
			},

		},

		onLoad(option) {
			var auth = JSON.parse(option.data);
			this.from_type = option.from_type || 0;
			if(auth.status && auth.certificate){
				this.status = 2;
				this.image = auth.certificate;
				this.wechat = auth.wechat;
				this.category_pid = auth.category_ids[0].category_pid;
				this.category_id = auth.category_ids[0].category_id;
			}
			this.getAuthType();
		}
	}
</script>

<style lang="less" scoped>
	.qualification {
		background: #FFF;
		min-height: 100vh;
		padding: 32rpx 32rpx 64rpx;
		justify-content: space-between;
	}
	
	.auth-content-text {
		width: 100%;
		.auth-title {
			font-weight: 500;
			font-size: 48rpx;
			color: #FD2A53;
			line-height: 66rpx;
		}
		
		.auth-text {
			font-size: 24rpx;
			color: #999999;
			line-height: 40rpx;
			margin: 24rpx 0 40rpx;
		}
	}

	.content {
		flex: 1;

		.list {
			width: 686rpx;
			height: 100rpx;
			background: #F8F8F8;
			border-radius: 16rpx;
			padding: 0 32rpx;
			margin-bottom: 42rpx;

			.label {
				font-size: 28rpx;
				color: #333333;
			}

			.input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				text-align: right;
			}

			#nohave {
				color: #999;
			}
		}

		.image_box {
			width: 654rpx;
			height: 478rpx;
			background: #F8F8F8;
			border-radius: 16rpx;
			position: relative;

			.up_box {
				width: 654rpx;
				height: 478rpx;

				.icon {
					margin: 180rpx 0 32rpx;

					/deep/ text {
						font-weight: 600 !important;
					}
				}

				.text {
					font-size: 28rpx;
					color: #999999;
					line-height: 40rpx;
				}
			}

			.image {
				width: 654rpx;
				height: 478rpx;
				border-radius: 16rpx;
				overflow: hidden;

				image {
					width: 248rpx;
					height: 248rpx;
				}
			}

			.detele {
				position: absolute;
				right: -24rpx;
				top: -24rpx;
				width: 48rpx;
				height: 48rpx;
				border: 2rpx solid #FD2A53;
				background: #FFF;
				border-radius: 24rpx;
			}

		}

		.image_preview {
			width: 100%;
			image {
				width: 100%;
			}
		}

	}

	.btn {
		width: 686rpx;
		height: 96rpx;
		background: #FD2A53;
		border-radius: 48rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
	}
</style>